<template>
	<view class="register-page">
		<view class="card-container">
			<!-- 顶部区域 -->
			<view class="header-section">
				<text class="title">注册新账户</text>
				<text class="subtitle">创建一个新账户，开始您的旅程。</text>
			</view>

			<!-- 核心表单 -->
			<view class="form-section">
<!-- 				<view class="input-group">
					<text class="label">用户名 (可选)</text>
					<input class="input" type="text" placeholder="请输入您的用户名" v-model="username" />
				</view> -->

				<view class="input-group">
					<text class="label">电子邮件/用户名</text>
					<input class="input" type="email" placeholder="请输入您的电子邮件或用户名" v-model="email" />
				</view>

				<view class="input-group password-group">
					<text class="label">密码</text>
					<input class="input" :type="passwordVisible ? 'text' : 'password'" placeholder="请输入您的密码"
						v-model="password" />
					<text class="password-toggle" @click="togglePasswordVisibility">
						{{ passwordVisible ? '隐藏' : '显示' }}
					</text>
				</view>

				<view class="input-group password-group">
					<text class="label">确认密码</text>
					<input class="input" :type="confirmPasswordVisible ? 'text' : 'password'" placeholder="请再次输入密码"
						v-model="confirmPassword" />
					<text class="password-toggle" @click="toggleConfirmPasswordVisibility">
						{{ confirmPasswordVisible ? '隐藏' : '显示' }}
					</text>
				</view>

				<button class="register-button" :disabled="loading" @click="zhuce">
					{{ loading ? '注册中...' : '注册' }}
				</button>
			</view>

			<!-- 底部区域 -->
			<view class="footer-section">
				<text class="login-text">已有账户？</text>
				<text class="login-link" @click="goToLogin">立即登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';


	const username = ref('');
	const email = ref('');
	const password = ref('');
	const confirmPassword = ref('');
	const passwordVisible = ref(false);
	const confirmPasswordVisible = ref(false);
	const loading = ref(false);

	const togglePasswordVisibility = () => {
		passwordVisible.value = !passwordVisible.value;
	};

	const toggleConfirmPasswordVisibility = () => {
		confirmPasswordVisible.value = !confirmPasswordVisible.value;
	};

	const handleRegister = () => {
		if (!email.value || !password.value || !confirmPassword.value) {
			uni.showToast({
				title: '请填写所有必填项',
				icon: 'none'
			});
			return;
		}

		if (password.value !== confirmPassword.value) {
			uni.showToast({
				title: '两次密码不一致',
				icon: 'none'
			});
			return;
		}

		loading.value = true;
		// 模拟注册请求
		setTimeout(() => {
			console.log('注册信息:', {
				username: username.value,
				email: email.value,
				password: password.value
			});
			uni.showToast({
				title: '注册成功 (模拟)',
				icon: 'success'
			});
			loading.value = false;
			// 实际应用中，这里会处理注册逻辑和页面跳转
			uni.navigateTo({
				url: '/pages/login/login' // 注册成功后跳转到登录页面
			});
		}, 1500);
	};

	const goToLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login' // 假设登录页面路径为 /pages/login/login
		});
	};

	const zhuce = () => {
			if (!email.value || !password.value || !confirmPassword.value) {
				uni.showToast({
					title: '请填写所有必填项',
					icon: 'none'
				});
				return;
			}

			if (password.value !== confirmPassword.value) {
				uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				});
				return;
			}
			loading.value = true;
			uni.request({
					url: "http://localhost:8080/zhu",
					data: {
						name: email.value,
						pass: password.value
					},
					success: (res) => {
						setTimeout(() => {
							// 修正为实际的响应式数据
							// console.log('登录信息:', { name: username.value, pass: pass.value });
							//用于在指定的延迟时间后执行回调函数。它的作用是模拟网络请求的延迟，增强用户体验。也就是登录时会有时间间隔
							loading.value = false;
						}, 1500);
						if (res.data == 1) {
							uni.showToast({
								title: '注册成功',
								icon: 'none'

							});
								
							setTimeout(()=>{
								//不能嵌套在uni.showToast里，因为showToast`的参数是一个配置对象，是一个异步操作
								uni.navigateTo({
									url: '/pages/login/login' // 注册成功后跳转到登录页面
								})
							},2000);
						} else {
							uni.showToast({
								title: '注册失败',
								icon: 'none'
							});
						}

					},
				});
			}
</script>

<style scoped>
	.register-page {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #f0f2f5;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.card-container {
		width: 100%;
		max-width: 600rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.header-section {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
		display: block;
	}

	.subtitle {
		font-size: 28rpx;
		color: #666666;
		display: block;
	}

	.form-section {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.input-group {
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.label {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 8rpx;
	}

	.input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
		color: #333333;
		box-sizing: border-box;
	}

	.input:focus {
		border-color: #007aff;
		outline: none;
	}

	.password-group .password-toggle {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(10rpx);
		font-size: 28rpx;
		color: #007aff;
		cursor: pointer;
		z-index: 1;
	}

	.register-button {
		width: 100%;
		height: 90rpx;
		background-color: #007aff;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		opacity: 1;
		transition: opacity 0.3s ease;
	}

	.register-button[disabled] {
		opacity: 0.7;
	}

	.footer-section {
		text-align: center;
		margin-top: 30rpx;
	}

	.login-text {
		font-size: 28rpx;
		color: #666666;
	}

	.login-link {
		font-size: 28rpx;
		color: #007aff;
		text-decoration: underline;
		margin-left: 10rpx;
	}
</style>